<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<html>

	<head>
		<meta charset="utf-8">
		<title>如期赴约</title>
		<link href="css/myui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/myui.css">
		<style type="text/css">
			html,body{
				background: #f5f5f5;
			}
			.mui-table-view{
				background: #f5f5f5;
			}
			.reservation_content{
				position: absolute;
			    z-index: 2;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    overflow: hidden;
			    width: 100%;
			    margin-top: 3rem;
			}
			.reservation_content1_content_out{
				position: relative;
			    overflow: hidden;
			    border-top: 1px solid #fff;
			    margin-bottom: 0 !important;
				padding-top: 0.75rem;
			    padding-bottom: 0.25rem;
			}
			.reservation_content1_content_out>div>button{
				background: #53b0ff;
				border: 0;
				color: #fff;
				width: 70%;
			}
			.mui-backdrop {
				display: none;
			    position: fixed;
			    top: 0;
			    right: 0;
			    bottom: 0;
			    left: 0;
			    z-index: 998;
			    background-color: rgba(0,0,0,.3);
			}
			.mui-backdrop_reservation_center{
				background: #fff;
				width: 70%;
    			margin: 0 auto;
				margin-top: 50%;
    			border-radius: 0.3rem;
			}
			.backdrop_reservation_center_title{
				text-align: center;
				padding: 5%;
			}
			.backdrop_reservation_center_title>img{
				width: 3rem;
				height: 3rem;
			}
			.backdrop_reservation_center_title>p{
				font-size: 0.8rem;
			    text-align: left;
			    line-height: 1.8rem;
			    margin-top: 0.2rem;
			    margin-bottom: 0rem;
			}
			.mui-backdrop_reservation_center>button{
				border-top: 1px solid #979797;
				border-right: 0;
				border-left: 0;
				border-bottom: 0;
				color: #464646;
				border-radius: 0 0 0.3rem 0.3rem;
				width: 100%;
				font-size: 0.9rem;
				padding: 0.75rem 0;
			}
			.reservation_content1_title_right>p:nth-child(1){
			    height: 2rem;
    			line-height: 2rem;
    			font: 1rem;
			}
		</style>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>

		<div id="app" class="mui-views" data-view="1">
			<div class="mui-view">
				<div class="mui-navbar">
					<div class="mui-navbar-inner mui-bar mui-bar-nav mui-navbar-center">
						<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left mui-pull-left_style">
							<span class="mui-icon mui-icon-left-nav"></span>
						</button>
						<h1 class="mui-center mui-title mui-title_fff" style="margin-left: -15px;">如期赴约</h1>
					</div>
				</div>
				<div class="mui-pages">
					<div id="setting" class="mui-page mui-page-center">
			<!--页面主内容区结束-->
					</div>
				</div>
			</div>
		</div>

		<!--<div class="reservation_content">
			<div class="mui-scroll">
			</div>
		</div>-->
		<div class="reservation_content" id="pullrefresh">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron wh_plaza_content">
				</ul>
			</div>
		</div>

		<div class="mui-backdrop" id="backdrop_objid">
			<div class="mui-backdrop_reservation_center">
				<div class="backdrop_reservation_center_title">
					<img src="img/tishi.png">
					<p>您已确认赴约时间、地点，请遵守诚信，合理安排您的行程。</p>
				</div>
				<div class="backdrop_reservation_center_ok"></div>
				<button id="content_ok_reservation">确   认</button>
			</div>
		</div>
				
		
	</body>
	
	<script src="js/index.js"></script>
	<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
	<script type="text/javascript">

		mui.init({
				swipeBack: false
			});
			var ListHeight = $(window).height() - ($("#sliderSegmentedControl").outerHeight()+$("header").outerHeight()+$("#sliderProgressBar").outerHeight());
			$(".mui-slider-group").css("height",ListHeight);
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
			
			mui.init({
				 gestureConfig:{
   					tap: true, //默认为true
   			},
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			mui('.reservation_content').scroll();

			$(".mui-scrollbar").css("display","none");

			var count = 0;
			var phoneNum = "";
			mui.plusReady(function(){
				phoneNum = localStorage.getItem("phoneNum");
			});
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
					var url = get_url() + 'order/list';
					var table = document.body.querySelector('.mui-table-view');
					var count_length = 10;
					var count_json;
					$.ajax({
						type: "post",
						dataType: "json",
						url: url,
						data: {
							"pageIndex":count,
							"pageSize":count_length
						},
						success: function(json){
							console.log(json);
							count++;
							if(json == null	|| json == ""){
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
								$(".mui-pull-bottom-pocket").css("visibility","inherit");
								return count;
							}
							for (var i = 0; i < count_length; i++) {
								var li = "";
								var imgPath = json[i].imgPath = ""?json[i].imgPath:'img/touxiang.png';
								var userName=json[i].WHOYUYUEID.substr(0,3)+'*******'+json[i].WHOYUYUEID.substr(9,11);
								li += '<div class="reservation_content1">'+
											'<div class="reservation_content1_title">'+
												'<div class="reservation_content1_title_left">'+
													'<img src="'+ imgPath +'">'+
												'</div>'+
												'<div class="reservation_content1_title_right">'+
													'<p>'+ userName +'</p>'+
												'</div>'+
											'</div>'+
											'<div class="reservation_content1_content">'+
												'<div>预约时间：<div>'+ json[i].YUYUETIME +'</div></div>'+
												'<div>预约地点：<div>'+ json[i].WHOYUYUEADDRESS +'</div></div>'+
												'<div>问题描述：<div>'+ json[i].CONTENT +'</div></div>'+
											'</div>'+
											'<div class="reservation_content1_content">'+
												'<div class="reservation_content1_content_out">'+
													'<div>'+
														'<button data-id="'+ json[i].ID +'">我要赴约</button>'+
													'</div>'+
												'</div>'+
											'</div>'+
										'</div>';
								$(".wh_plaza_content").append(li);
							}
							mui(".reservation_content1_content_out>div").on("tap", "button", function() {
								orderId = $(this).data('id');
								is_ok(orderId);
							});
							
							document.getElementById("content_ok_reservation").addEventListener("tap", function() {
								document.getElementById("backdrop_objid").style.display="none";
							});
							mui(".wh_plaza_content").on("tap","li",function(){
								mui.openWindow({
								    url: $(this).data('url'),
								    id:'Consultation_Plaza_details.html',
								    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
								    waiting:{
								      autoShow:true,//自动显示等待框，默认为true
								      title:'正在加载...',//等待对话框上显示的提示内容
								    }
								});
							});
						},
						error: function(jqXHR, textStatus, errorThrown) {
							mui.plusReady(function(){
									document.addEventListener("netchange", wainshow, false);
									wainshow();
								//message();
								});
								function wainshow() {
									if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
									mui.toast("网络异常，请检查网络设置！");				
									} else {
									//mui.toast("网络正常");
									}
								}
						}
					});
				},1500);
			}
			function is_ok(id){
				var url_post = get_url() + 'order/toOrder/'+ phoneNum;
				$("#backdrop_objid").show();
				$.ajax({
					url: url_post,
					type: "post",
					dataType: "JSONP",
					data: {
						"orderId": id
					},
				    jsonp: "jsonpcallback",
				    beforeSend: function (xhr) {
				    },
					success: function(json){
						if(json == true){
							mui.toast("赴约成功");
							mui.openWindow({
							    url: 'my_reservation.html', 
							    id:'my_reservation'
							});
						}else{
							mui.toast("赴约失败");
						}
					},
					error: function(jqXHR, textStatus, errorThrown) {
						mui.plusReady(function(){
							document.addEventListener("netchange", wainshow, false);
							wainshow();
						//message();
						});
						function wainshow() {
							if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
							mui.toast("网络异常，请检查网络设置！");				
							} else {
							//mui.toast("网络正常");
							}
						}
					}
				});
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);
	</script>
	</html>